<template>
	<view class="banner">
		<guise-search></guise-search>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item v-for="item in swiperList" :key="item._id">
				<view class="swiper-item">
					<img :src="serverUrl+item.url" alt="">
				</view>
			</swiper-item>
		</swiper>
		<uni-notice-bar show-icon scrollable text="该蛋糕商城为测试项目,请勿付款!__测试项目,请勿付款!__测试项目,请勿付款!"
			backgroundColor="#f7f3eb" />
		<!-- 分类导航 -->
		<view class="nav-list">
			<view class="nav-item" v-for="(item,i) in navList" :key="item._id">
				<image :src="serverUrl+ item.url" class="nav-img"></image>
				<view style="text-align: center;">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 20rpx;background-color: #e5e5e5;"></view>
		<!-- 领券 -->
		<open-vip></open-vip>
		<!-- 楼层区域 -->
		<view class="floor-list">
			<floor-title describe="创意蛋糕 私人订制"></floor-title>
			<view class="floor-custom">
				<view class="custom-top">
					<view class="custom-top-left" @click="goDetail(cusTop[0]._id)">
						<floor-card :imgUrl="cusTop[0].img_url[0]">
							<view class="tags">
								<text class="red-tag">千万销量</text>
								<text class="red-tag">热门推荐</text>
							</view>
						</floor-card>
					</view>
					<view class="custom-top-right">
						<view class="custom-top-right-item" v-if="i>0" v-for="(item,i) in cusTop" :key="item._id"
							@click="goDetail(item._id)">
							<floor-card :imgUrl="item.img_url[0]" :price="item.price"></floor-card>
						</view>
					</view>
				</view>
				<view class="custom-btm">
					<view class="custom-btm-item" v-for="(item,i) in cusBtm" :key="item._id"
						@click="goDetail(item._id)">
						<floor-card :imgUrl="item.img_url[0]" :price="item.price"></floor-card>
					</view>
				</view>
			</view>

			<floor-title title="精品推荐"></floor-title>
			<view class="floor-recommend">
				<view class="floor-recommend-item" v-for="item in floorList.recommend" :key="item._id"
					@click="goDetail(item._id)">
					<floor-card :goodsName="item.name" :price="item.price" :prePrice="item.pre_price"
						:imgUrl="item.img_url[0]"></floor-card>
				</view>
			</view>

			<floor-title title="全网热销-Hot sale"></floor-title>
			<view class="floor-hotsell">
				<view class="floor-hotsell-item" v-for="item in floorList.hotSell" :key="item._id">
					<goods-card :goods="item" :isShow="true">
					</goods-card>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
				navList: [],
				floorList: {},
			}
		},
		computed: {
			cusTop() {
				let val = [];
				if (this.floorList.custom) {
					val = this.floorList.custom.slice(0, 3);
				}
				return val
			},
			cusBtm() {
				let val = [];
				if (this.floorList.custom) {
					val = this.floorList.custom.slice(3);
				}
				return val
			}
		},
		onLoad() {
			this.getHomeData();
		},
		methods: {
			// 获取首页数据
			async getHomeData() {
				let {
					statusCode,
					data
				} = await uni.$http.reqHomeData();
				if (statusCode == 200) {
					this.swiperList = data.swiperList;
					this.navList = data.navList;
					this.floorList = data.floorList;
				}
			},
			// 跳转至商品详情页
			goDetail(goodsId) {
				uni.navigateTo({
					url: `/subpkg/goods-detail/goods-detail?goodsId=${goodsId}`
				})
			},
		},

	}
</script>

<style lang="scss">
	swiper {
		height: 350rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.nav-list {
		display: flex;
		justify-content: space-around;
		margin: 15px 0;

		.nav-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 30%;
		}
	}

	// 私人定制
	.floor-custom {
		padding-right: 10rpx;

		.custom-top {
			display: flex;
			box-sizing: border-box;
			margin-bottom: 10rpx;

			.custom-top-left {
				flex: 2;
				margin: 0 10rpx;

				.tags {
					padding: 28rpx 0;

					.red-tag {
						display: inline-block;
						padding: 5rpx 10rpx;
						margin: 0 10rpx;
						color: #f00;
						font-size: 24rpx;
						border: 1px solid #f00;
						border-radius: 10rpx;
					}
				}
			}

			.custom-top-right {
				flex: 1;

				.custom-top-right-item {
					&:first-child {
						margin-bottom: 10rpx;
					}
				}
			}
		}

		.custom-btm {
			display: flex;

			.custom-btm-item {
				flex: 1;
				margin-left: 10rpx;
			}
		}
	}

	// 精品推荐
	.floor-recommend {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.floor-recommend-item {
			width: 32%;
			padding: 20rpx 5rpx 0 5rpx;
		}
	}

	// 全网热销
	.floor-hotsell-item {
		padding: 0 20rpx 20rpx;
	}
</style>
